<template>
    <div class="daily-special">
      
        <loading :mark="mark">
            <swiper :options="swiperOption" ref="mySwiper" style="height:100%;">
                <div class="swiper-slide menu">
                      meenu list
                </div>
                <swiper-slide v-for="(item,index) in items" :key=index :class="item.id">
                    <mu-appbar style="width: 100%;" color="primary">
                        <mu-button icon slot="left" @click="slideShow()">
                            <mu-icon value="menu"></mu-icon>
                        </mu-button>
                        Title
                        <mu-button flat slot="right">LOGIN</mu-button>
                    </mu-appbar>
                    <mu-container >
                        <router-link :to="{name:'cardShow',params:{id:item.id}}">
                            <mu-card style="width: 100%; max-width: 375px; margin: 0 auto;">
                                <mu-card-header title="Myron Avatar" sub-title="sub title">
                                    <mu-avatar slot="avatar">
                                        <!-- <img src="../../assets/images/uicon.jpg"> -->
                                    </mu-avatar>
                                </mu-card-header>
                                <mu-card-media title="Image Title" sub-title="Image Sub Title">
                                    <img :src="item.food_pic">
                                </mu-card-media>
                                <mu-card-title :title="item.title" :sub-title="item.title"></mu-card-title>
                                <mu-card-text v-text="item.content">

                                </mu-card-text>

                            </mu-card>
                        </router-link>

                    </mu-container>
                </swiper-slide>
            </swiper>
        </loading>
    </div>
</template>

<script>
import loading from "./common/loading"

export default {
    name: "carrousel",
    data() {
        return {
            swiperOption: {
                resistanceRatio: 0.4,
                notNextTick:true,
                slidesPerView: 'auto',
                initialSlide: 1,
                resistanceRatio: 0,
                slideToClickedSlide: true
            },
            items: [], //每日精彩推荐
            mark: true,
            flag:true //
        };
    },

    mounted() {
        // current swiper instance
        // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
        
        // this.swiper.slideTo(3, 1000, false)
        this.fetchData().then(()=>{
             this.$nextTick(function(){
                          console.log("this is current swiper instance object", this.swiper); 
                    })
        });
    },
    components: {
        loading,
      
    },
    computed: {
        swiper() {
        return this.$refs.mySwiper.swiper
        }
    },
    methods: {
        fetchData() {
           return new Promise((resolve,reject)=>{
                    this.$http.request("/referrer", {}, "get").then(res => {
                    
                    let recipeindex_info = res.data.recipeindex_info;
                    if (res.data.recipeindex_info.length != 0) {
                        this.mark =false;
                        this.items = recipeindex_info;
                        resolve()
                    }
                });
           })
        },
        slideShow(){
            if(this.flag){
                this.swiper.slideTo(0,1000)
                 this.flag = !this.flag
            }else{
                 this.swiper.slideTo(1,1000)
                    this.flag = !this.flag
            }
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
    font-weight: normal;
}
ul {
    list-style-type: none;
    padding: 0;
}
li {
    display: inline-block;
    margin: 0 10px;
}
a {
    color: #42b983;
}
.daily-special{
    height: 100%
}
.container {
    padding: 0px;
    margin: 0px;
}
.menu {
			min-width: 100px;
			width: 70%;
			max-width: 320px;

			background-color: #2C8DFB;
			color: #fff;
		}
</style>
